<template> 


	<div class="miste">
     
      <!-- 头部组件 -->
      <HearderTop title="昌平区北七家宏福科技园(337省道北">
           <span class="hearder_search" slot="left">
              <i class="iconfont icon-sousuo"></i>
           </span>
           <span class="header_login" slot="right">
              <span class="header_login_text">
                   登入|注册
              </span>
           </span>
        
      </HearderTop>

      <!-- 首页导航-->
       <nav class="miste_nav">
          <div class="swiper-container">
          	<div class="swiper-wrapper">
              <!-- 第一个分页 -->
          		 <div class="swiper-slide">

          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/1.jpg">
          		 			</div>
          		 			<span>甜品饮品</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/2.jpg">
          		 			</div>
          		 			<span>商超便利</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/3.jpg">
          		 			</div>
          		 			<span>美食</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/4.jpg">
          		 			</div>
          		 			<span>简餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/5.jpg">
          		 			</div>
          		 			<span>新店特惠</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/6.jpg">
          		 			</div>
          		 			<span>准时达</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/7.jpg">
          		 			</div>
          		 			<span>预订早餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/8.jpg">
          		 			</div>
          		 			<span>土豪推荐</span>
          		 		</a>
          		 		
          		 </div>
                
                <!-- 第二个分页 -->
          		 <div class="swiper-slide">

          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/9.jpg">
          		 			</div>
          		 			<span>甜品饮品</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/10.jpg">
          		 			</div>
          		 			<span>商超便利</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/11.jpg">
          		 			</div>
          		 			<span>美食</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/12.jpg">
          		 			</div>
          		 			<span>简餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/13.jpg">
          		 			</div>
          		 			<span>新店特惠</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/14.jpg">
          		 			</div>
          		 			<span>预订早餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/1.jpg">
          		 			</div>
          		 			<span>土豪推荐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/2.jpg">
          		 			</div>
          		 			<span>甜品饮品</span>
          		 		</a>
          		 		
          		 </div>

                <div class="swiper-slide">

                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/9.jpg">
                    </div>
                    <span>甜品饮品</span>
                  </a>
                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/10.jpg">
                    </div>
                    <span>商超便利</span>
                  </a>
                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/11.jpg">
                    </div>
                    <span>美食</span>
                  </a>
                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/12.jpg">
                    </div>
                    <span>简餐</span>
                  </a>
                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/13.jpg">
                    </div>
                    <span>新店特惠</span>
                  </a>
                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/14.jpg">
                    </div>
                    <span>预订早餐</span>
                  </a>
                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/1.jpg">
                    </div>
                    <span>土豪推荐</span>
                  </a>
                  <a href="javascript:;" class="link_to_food">
                    <div class="food_container">
                      <img src="./img/nav/2.jpg">
                    </div>
                    <span>甜品饮品</span>
                  </a>
                  
               </div>



          	</div>


            <!-- 分页器 -->
       
            <div class="swiper-pagination"></div>



          </div>
       </nav>




      <!-- 首页附近商家 -->
       <div class="miste_shop_list">
       	<div class="shop_header">
       		<i class="iconfont icon-menu shop_icon"></i>
       		<span class="shop_header_title">附近商家</span>
       	</div>
       	<ShopList></ShopList>
       	

       </div>


	 </div> 

</template> 


<script> 

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css'

import HearderTop from "../../components/HearderTop/HearderTop.vue";

import ShopList from "../../components/ShopList/ShopList.vue";



export default {
  mounted(){
    
    new Swiper('.swiper-container',{
        
        direction: 'horizontal',
        loop:true,
        autoplay: { 
          delay: 2000, 
          stopOnLastSlide: false, 
          disableOnInteraction: true, 
        },
        speed:1000,
        pagination:{
          el:'.swiper-pagination'
        }

    })


  },




  components:{
    HearderTop,
    ShopList
  }


} 


</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixins.sty";
	@import "../../static/css/reset.css";
.miste
	width 100%
	.miste_nav
		background #fff
		margin-top 45px
		height 200px
		bottom-border-1px(#e4e4e4)
		.swiper-container
			width 100%
			height 100%
			.swiper-wrapper
				width 100%
				height 100%
				.swiper-slide
					display flex
					justify-content center
					align-items flex-start
					flex-wrap wrap
					.link_to_food
						width 25%
						.food_container
							width 100%
							display block
							text-align center
							font-size 0
							padding-bottom 10px
							img
								height 50px
								width 50px
								display inline-block
					span
						width 100%
						display block
						text-align center
						font-size 13px
						color #666		
			.food_container>span.swiper-pagination-bullet-active
				background #02a774	
	.miste_shop_list
		top-border-1px(#e4e4e4)
		margin-top 10px
		background #fff
		width 100%
		.shop_header
			padding 10px 10px 0		
			.shop_icon
				color #999
				margin-left 5px
			.shop_header_title
				color #999
				font-size 14px
				line-height 20px	
		
								  	
							  	
							  	 			
										





						



</style>